<template>
  <div class="apply-player-container">
    <div class="header">
      <h1>申请成为陪玩人员</h1>
    </div>
    <div class="form-section">
      <div class="form-item">
        <label for="game">会玩的游戏:</label>
        <el-input type="text" v-model="applyfor.gameTitle" placeholder="请输入游戏名称"/>
      </div>
      <div class="form-item">
        <label for="gameNickname">游戏昵称:</label>
        <el-input type="text" v-model="applyfor.gameNickname" placeholder="请输入游戏昵称"/>
      </div>
      <div class="form-item">
        <label for="position">擅长位置:</label>
        <el-input type="text" v-model="applyfor.position" placeholder="请输入擅长的位置"/>
      </div>
      <div class="form-item">
        <label for="role">擅长角色:</label>
        <el-input type="text" v-model="applyfor.characterRole" placeholder="请输入擅长的角色"/>
      </div>
      <div class="form-item">
        <label for="price">价格时长:</label>
        <el-input type="text" v-model="applyfor.pricePerHour" id="price" placeholder="元/小时"/>
      </div>
      <div class="form-item">
        <label for="phone">联系电话:</label>
        <el-input type="text" v-model="applyfor.contactPhone" placeholder="请输入本人联系电话"/>
      </div>
    </div>
    <div class="upload-section">
      <el-upload
        class="avatar-uploader"
        action="http://localhost:8200/play/players-application/fileUpload"
        name="file"
        :show-file-list="false"
        :before-upload="beforeAvatarUpload">
        <van-image v-if="imageUrl" :src="imageUrl" class="avatar" />
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
    </div>

  <div class="description-section">
    <textarea v-model="applyfor.description" placeholder="文字介绍（请简要说明技能、技术等，不超过50字）"></textarea>
  </div>
  <div class="button-group">
    <button @click="cancel">取消</button>
    <button @click="submit" class="submit-button">确认</button>
  </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      applyfor: {
        gameTitle: '',
        gameNickname: '',
        position: '',
        characterRole: '',
        pricePerHour: '',
        contactPhone: '',
        skillImage: '',
        description: '',
        userId: null,

      },
      imageUrl: "",
    };
  },
  methods: {
    handleAvatarSuccess(res, file) {
      console.log("照片"+res);
      // console.log("文件"+file);
      this.imageUrl=res
      this.applyfor.skillImage =this.imageUrl;

      // this.applyfor.fileUrl = URL.createObjectURL(file.row);

    },
    beforeAvatarUpload(file) {
      return null;
    },
    uploadImage() {
      // 触发展示上传图片的逻辑
      console.log("上传图片逻辑");
    },
    cancel() {
      // 处理取消逻辑
      console.log("取消申请");
    },
    // upload() {
    //   // 处理上传逻辑
    //   axios.post(`/play/players-application/fileUpload`, this.applyfor).then(res => {
    //     if (res.data === null) {
    //       this.$message.error(res.data);
    //     }else {
    //       this.$message.success(res.data);
    //       this.applyfor.fileUrl = res.data;
    //     }
    //   })
    // }
    // },
    submit() {

      // 处理提交逻辑
      this.applyfor.skillImage = this.imageUrl;
      axios.post(`/play/players-application/applyfor`, this.applyfor).then(res => {

        if (res.data.code === 200) {
          this.$message.success(res.data);
        } else {
          this.$message.error(`${res.data.message}: ${res.data.data}`);        }
      });
    },
  },
  created() {
    this.applyfor.userId = JSON.parse(sessionStorage.getItem('id'));
  }
};
</script>

<style scoped>


.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader{
  text-align: left;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  line-height: 120px;
  text-align: center;
  border: 1px solid #d9d9d9;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.apply-player-container {
  padding: 20px;
  background-color: #f7f9fc;
  height: 100vh;
}

.header {
  text-align: center;
  margin-bottom: 20px;
}

.form-section {
  margin-bottom: 20px;
}

.form-item {
  margin: 15px 0;
}

label {
  display: block;
  margin-bottom: 5px;
}

input {
  width: 100%;
  padding: 10px;
  border: 1px solid #eaeaea;
  border-radius: 5px;
}

.upload-section {
  margin: 20px 0;
  text-align: center;
}

.upload-box {
  border: 2px dashed #00aaff;
  border-radius: 10px;
  padding: 40px;
  cursor: pointer;
  display: inline-block;
  color: #00aaff;
}

.upload-box span {
  font-size: 50px;
}

.description-section {
  margin: 20px 0;
}

textarea {
  width: 100%;
  height: 100px;
  padding: 10px;
  border: 1px solid #eaeaea;
  border-radius: 5px;
}

.button-group {
  display: flex;
  justify-content: space-between;
}

button {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.submit-button {
  background-color: #00aaff;
  color: white;
}
</style>
